// import Empty from '@/components/Empty';
// import { Flex } from 'antd';
import { FC } from 'react';
import { useIntl } from 'umi';
import { InfoBlock } from '../components/InfoBlock';
import { InfoField } from '../components/InfoField';
import { useDict } from '../SelectedDeviceNodeContext';
interface IProps {
  data: API.LcDataDTO['glcData'];
}

export const Info: FC<IProps> = ({ data }) => {
  const { onlineState, runState } = useDict();
  let onLineLabel = data?.onlineStatus;
  let runLabel = data?.workState;

  if (onlineState && onlineState.length) {
    let arr = onlineState.filter((res) => String(res?.value) === String(data?.onlineStatus));
    if (arr.length > 0) {
      onLineLabel = arr[0]?.label;
    }
  }

  if (runState && runState.length) {
    let arr = runState.filter((res) => String(res?.value) === String(data?.workState));
    if (arr.length > 0) {
      runLabel = arr[0]?.label;
    }
  }

  const intl = useIntl();

  const Items = [
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.runningStatus' }),
      value: runLabel,
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.gcbStatus' }),
      value: data?.mainBreakerStatus,
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.breaker' }),
      value: data?.faultStatus,
    },
  ];

  const temptOrItems = [
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceStatus' }),
      value: data?.devStatus,
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.onlineStatus' }),
      value: onLineLabel,
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.deviceModel' }),
      value: data?.devModel,
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.ambientTemperature' }),
      value: data?.temperature,
    },
    {
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.ambientHumidity' }),
      value: data?.humidity,
    },
  ];

  return (
    <div style={{ padding: '20px 30px', marginBottom: 0 }}>
      <InfoBlock title="">
        {Items.map((item, index) => (
          <InfoField key={index} label={item.label} value={item.value} unit={item?.unit} />
        ))}
      </InfoBlock>
      <InfoBlock title={intl.formatMessage({ id: 'stationRealtimeMonitoring.tempInfo' })}>
        {temptOrItems.map((item, index) => (
          <InfoField key={index} label={item.label} value={item.value} unit={item?.unit} />
        ))}
      </InfoBlock>
    </div>
  );
};
